移动端 H5 交互要点

历史：click 约 300ms 延迟

早期浏览器为区分 单击与双击，会在单击上增加约 300ms 延迟，移动端滚动体验差。

现代环境

实现 移动端体验最优、无缩放、无延迟、无滚动错位

<!-- 设置页面宽度等于设备宽度，初始不缩放，并且禁止用户手动缩放，保证页面在移动端正常显示、无横向滚动、交互更稳定。 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<style>
/* 为优化移动端触摸体验，全局使用 touch-action: manipulation 禁用双击缩放行为，消除浏览器默认 300ms 点击延迟，提升页面交互响应速度。 */
* {
  touch-action: manipulation;
}
</style>

仍需顺畅点击时

• 优先使用 touch-action: manipulation（CSS）减少双击缩放带来的额外延迟感。
• 旧机型兼容可评估 fastclick 等库（维护状态需自行确认）：原理多为拦截 touch 事件合成 click。
• 自定义组件注意 焦点与可点击区域（至少约 44×44 CSS 像素利于触控）。

---

小结

先保证 viewport；多数新项目不必再为 300ms 专门上库；仍卡顿则从 主线程长任务、重排 方向排查（参见前端性能文档）。